<template>
	<view class="page">
		<view class="page-head-bg-box">
			<image :src="getAssets('@/static/static-online/my/my-bg.png')" mode=""></image>
		</view>

		<u-navbar :fixed="true" :placeholder="true" title="我的佣金" :bgColor="headBackground" :autoBack="true"
			:titleStyle="{color:'#000000'}" :leftIconColor="'#000000'">
		</u-navbar>

		<view class="data-panel">
			<view class="title">
				佣金余额
			</view>
			<view class="total">
				<text class="huobi">
					￥
				</text>
				<text class="money">
					{{yongjin_info.commission || '0.00'}}
				</text>
			</view>
			<view class="info-items flex-between">
				<view class="info-item flex-between">
					<view class="label">
						佣金总和
					</view>
					<view class="value">
						￥{{yongjin_info.costCommission || '0.00'}}
					</view>
				</view>
				<view class="info-line">

				</view>
				<view class="info-item flex-between">
					<view class="label">
						累积提现
					</view>
					<view class="value">
						￥{{yongjin_info.costCommission - yongjin_info.commission  || '0.00'}}
					</view>
				</view>
			</view>
		</view>

		<u-sticky :offset-top="is_env_mp ? sticky_top  : 44" customNavHeight="0">
			<view class="page-tabs">
				<view class="page-tabs-inner">
					<u-tabs :current="tabCurrent" :scrollable="false" :list="tabList" keyName="title" lineColor="#FFFFFF"
						:lineWidth="28" :lineHeight="2" @click="tabClick"
						:itemStyle="{height: '40px',fontSize: '24rpx',color:'#9695A3'}"
						:activeStyle="{fontWeight: 'bold',color: '#000000' }" :inactiveStyle="{}"></u-tabs>
				</view>
			</view>
		</u-sticky>


		<view class="page-ctx">
			<view class="record-list">
				<view class="record-item flex-between" v-for="(item,index) in records" :key="index">
					<view class="info-box">
						<view class="title">
							{{item.remark}}
						</view>
						<view class="date-box">
							<text class="type">{{item.is_plus ? '增加' : '使用'}}</text>
							<text class="date">{{item.createdTime}}</text>
						</view>
					</view>
					<view class="value-box">
						<view class="value" :class="item.is_plus ? 'plus' : 'minus'">
							{{item.is_plus ? '+' : '-'}} {{item.price}}
						</view>
						<view class="yue">
							余额：{{item.yue}}
						</view>
					</view>
				</view>
			</view>

			<view class="load-more-box" style="margin-top: 50rpx;">
				<u-loadmore :status="loadmore_status" @loadmore="loadMore" />
			</view>
		</view>


		<w_bottom_safe height="140" />

		<view class="page-foot">
			<view class="safe-fixed-bottom">
				<button class="btn flex-center" :disabled="false" @click="toRoute('/withdrawal')">
					立即提现
				</button>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				sticky_top: 92, //
				headBackground: 'rgba(255,255,255,0)', //控制顶部标题栏颜色 默认透明颜色 transparent
				tabCurrent: 0,
				tabSelect: {
					title: '全部',
					value: 0,
				},
				tabList: [{
						title: '全部',
						value: 0,
					},
					{
						title: '增加',
						value: 1,
					},
					{
						title: '使用',
						value: 2,
					}
				],

				//
				yongjin_info: {
					commission: 0, //当前
					costCommission: 0, //总和
				},
				records: [],
				count: 0,
				pagination: {
					page: 1,
					pageNum: 10
				},
				loadmore_status: 'loadmore', //loadmore  / loading / nomore
				//
			}
		},
		onLoad() {
			// #ifdef MP
			let native_menu_rect = uni.getMenuButtonBoundingClientRect();
			console.log('胶囊按钮', native_menu_rect)
			this.native_menu_bottom = native_menu_rect.bottom
			this.sticky_top = this.native_menu_bottom + 6; //44 - 30
			// #endif
		},

		onShow() {
			this.initQuery();
			this.setView();
		},

		onReachBottom() {
			this.loadMore()
		},

		onPageScroll(e) {
			console.log('滚动e', e)

			let percent = e.scrollTop / 50;
			if (percent > 1) {
				percent = 1
			}
			this.headBackground = `rgba(255,255,255,${percent})`
			this.showSearchBorder = e.scrollTop >= 30;

			console.log('顶部背景色', this.headBackground)
		},
		// onPullDownRefresh() {
		// 	this.initQuery()

		// 	setTimeout(() => {
		// 		uni.stopPullDownRefresh()
		// 	}, 500)
		// },

		methods: {
			loadMore() {
				if (this.loadmore_status == 'loadmore') {
					this.loadmore_status = 'loading'
					this.pagination.page++;
					this.query_records();
				}
			},
			initQuery() {
				this.records = [];
				this.pagination.page = 1;
				this.loadmore_status = 'loadmore'
			},
			setView() {
				this.query_records()
			},

			query_records() {
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'Commission_lists',
						...this.pagination,
						type: this.tabSelect.value, //0全部 1收入 2 支出
					},
				}).then(res => {
					if (res.code == 200) {
						this.yongjin_info = res.data;
						this.count = res.data.count;

						let list = res.data.list;
						list.forEach(v => {
							v.is_plus = v.logType == 1;
						})
						this.records = this.records.concat(list);
						this.loadmore_status = this.count > this.records.length ? 'loadmore' : 'nomore';
					}
				})
			},

			tabClick(item) {
				this.tabSelect = item
				this.initQuery();
				this.setView();
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F8F8F8;
	}
</style>
<style lang="scss" scoped>
	.page {}

	.page-head-bg-box {
		position: fixed;
		z-index: 1;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 562rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}



	.data-panel {
		position: relative;
		z-index: 2;
		padding: 32rpx;

		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: rgba(0, 0, 0, 0.9);
		}

		.total {
			margin-top: 16rpx;

			.huobi {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: rgba(0, 0, 0, 0.9);
			}

			.money {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 56rpx;
				color: rgba(0, 0, 0, 0.9);
			}
		}

		.info-items {
			margin-top: 32rpx;

			.info-item {
				flex: 1;
				overflow: hidden;

				.label {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: rgba(0, 0, 0, 0.9);
				}

				.value {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: rgba(0, 0, 0, 0.9);
				}
			}

			.info-line {
				width: 2rpx;
				height: 24rpx;
				background: #aaaaaa;
				margin: 0 20rpx;
			}
		}
	}


	.page-tabs {
		padding: 16rpx 32rpx;
		background: #ffffff;

		.page-tabs-inner {

			height: 80rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
			border-radius: 40rpx 40rpx 40rpx 40rpx;
		}
	}



	.page-ctx {
		padding: 24rpx 32rpx;
	}


	.record-list {
		.record-item {
			margin-bottom: 24rpx;
			padding: 24rpx;
			min-height: 142rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
			border-radius: 8rpx 8rpx 8rpx 8rpx;

			.info-box {
				flex: 1;
				overflow: hidden;

				.title {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 26rpx;
					color: #000000;
				}

				.date-box {
					margin-top: 8rpx;

					.type {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 20rpx;
						color: #000000;
					}

					.date {
						margin-left: 20rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 20rpx;
						color: #000000;
					}
				}
			}

			.value-box {
				.value {
					text-align: right;
					font-family: PingFang SC, PingFang SC;
					font-size: 24rpx;
					color: #000000;
					font-weight: bold;

					&.plus {
						color: #E23410;
					}

					&.minus {
						color: #429F25;
					}
				}

				.yue {
					margin-top: 12rpx;
					text-align: right;
					font-family: PingFang SC, PingFang SC;
					font-size: 24rpx;
					color: #000000;
				}
			}
		}
	}


	.page-foot {
		.btn {
			width: 100%;
			height: 80rpx;
			background: #CB0011;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}
</style>